<template>
	<view class="point-box">
	    <view class="point1"></view>
	    <view class="point2"></view>
	    <view class="point3"></view>
	</view>
</template>

<script>
</script>

<style>
	.point-box {
		/* margin: 20% auto; */
		width: 100rpx;
	}
	
	.point-box>view {
		width: 15rpx;
		height: 15rpx;
		background-color: #4f4f4f;
		border-radius: 100%;
		display: inline-block;
		animation: action 1.5s infinite ease-in-out;
		animation-fill-mode: both;
	}
	
	.point-box .point1 {
		animation-delay: -0.3s;
	}
	
	.point-box .point2 {
		animation-delay: -0.1s;
	}
	
	@keyframes action {
		0%,
		80%,
		100% {
			transform: scale(0);
		}
	
		40% {
			transform: scale(1.0);
		}
	}
</style>
